<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form-model layout="inline" v-bind="searchModelConfig" @keyup.enter.native="searchQuery">
              <a-row v-bind="searchRowConfig">
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input v-model="queryParam.searchValue" placeholder="请输入客户名称">
                      <a-icon slot="prefix" class="font-placeholder" type="search" />
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input v-model="queryParam.cellCode" placeholder="请输入细胞编号">
                      <a-icon slot="prefix" class="font-placeholder" type="search" />
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="5">
                  <a-form-model-item label="申请项目名称">
                    <ry-select
                      v-model="queryParam.applyProject"
                      :dataSource="$getDict('APPLY_PROJECT')"
                      placeholder="请选择项目名称" />
                  </a-form-model-item>
                </a-col>
                <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
                  <a-button @click="searchQuery" type="primary">查询</a-button>
                  <a-button @click="searchReset" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <div>
              <a-button @click="exportExcel" :loading="exportLoading" v-has="['cellListExport']">导出细胞列表</a-button>
            </div>
          </div>

          <!-- table区域 -->
          <a-row>
            <a-col :span="24">
              <ry-table
                :columns="columns"
                :loading="loading"
                :data-source="dataSource"
                :rowKey="record => record.id"
                :pagination="ipagination"
                bordered
                :scroll="{ x: 'max-content'}">

                <!-- 项目 -->
                <template slot="applyProject" slot-scope="{text, record}">
                  <span v-if="record.applyProject">
                    <a-tag color="blue">
                      {{ $getDictName('APPLY_PROJECT', record.applyProject) }}
                    </a-tag>
                  </span>
                  <span v-else>未绑定项目</span>
                </template>

                <!-- 细胞来源类型 -->
                <template slot="sourceType" slot-scope="{text}">
                  <span>{{ $getDictName('record_source', text) || '--' }}</span>
                </template>

                <template slot="cellType" slot-scope="{text}">
                  <span>{{ $getDictName('cell_type', text) || '--' }}</span>
                </template>

                <!-- 状态 -->
                <template slot="status" slot-scope="{text}">
                  <span>{{ $getDictName('cell_status', text) || '--' }}</span>
                </template>
                <template slot="phone" slot-scope="{text}">
                  <span>{{ maskPhone(text) }}</span>
                </template>
                <template slot="projectNumber" slot-scope="{record}">
                  <span v-if="record.applyProjectId">{{record.projects.projectNumber}}</span>
                  <span v-else>0</span>
                </template>

                <!-- 操作（灰底按钮） -->
                <template slot="action" slot-scope="{record}">
                  <a-space size="middle">
                    <a-tooltip>
                      <span slot="title" v-if="record.outbounds === []">细胞已出库，不可选择</span>
                      <span slot="title" v-else>{{$getDictName('cell_status', record.status)}}</span>
                      <a-button v-has="['cellListEdit']" type="primary" @click="handleEdit(record)" :disabled="record.status === '3' || record.status === '4'">编辑</a-button>
                    </a-tooltip>
                    <a-button v-has="['cellListOut']" type="danger" @click="handleOut(record)" v-if="record.status === '2'">出库</a-button>
                    <a-button v-has="['cellListDel']" type="default" @click="handleDelete(record.id)" v-if="(record.status === '2' || record.status === '1'|| record.status === '0') && record.outbounds.length === 0">删除</a-button>
                  </a-space>
                </template>

              </ry-table>
            </a-col>
          </a-row>
        </div>

        <!-- 弹窗 -->
        <CellModel
          ref="modalForm"
          @ModalOk="modalFormOk"
          :url="url" />

        <!-- 出库弹窗 -->
        <OutModel ref="outModal" @ModalOk="modalFormOk" :status="0"/>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import CellModel from "./modules/CellModel.vue";
import OutModel from "./modules/OutModel.vue";
import {exportExcel} from '@/utils/export.js'

export default {
  name: '',
  mixins: [RyListMixin, exportExcel],
  components: {  CellModel, OutModel  },
  data () {
    return {
      reloadDict: true,
      show: false,
      isShow: false,
      cellCode: '',
      exportLoading: false,
      queryParam: {},
      columns: [
        { title: '客户名称', align: 'center', dataIndex: 'nickname' },
        { title: '客户编码', align: 'center', dataIndex: 'serialNumber' },
        { title: '项目', align: 'center', dataIndex: 'applyProject', scopedSlots: { customRender: 'applyProject' } },
        { title: '细胞编号', align: 'center', dataIndex: 'cellCode', scopedSlots: { customRender: 'cellCode' } },
        { title: '项目数量', align: 'center', dataIndex: 'projectNumber', scopedSlots: { customRender: 'projectNumber' }},
        { title: '细胞管数(原)', align: 'center', dataIndex: 'originalCellNum'},
        { title: '细胞管数(余)', align: 'center', dataIndex: 'cellNum'},
        { title: '细胞数量', align: 'center', dataIndex: 'quantity'},
        { title: '回输时间', align: 'center', dataIndex: 'returnDate' },
        { title: '采样时间', align: 'center', dataIndex: 'sampleTime' },
        { title: '状态', align: 'center', fixed: 'right', dataIndex: 'status', scopedSlots: { customRender: 'status' } },
        { title: '操作', align: 'center', fixed: 'right', width: 140, scopedSlots: { customRender: 'action' } }
      ],
      url: {
        list:   this.$api.permission.cellList.cell,
        insert: this.$api.permission.cellList.insert,
        update: this.$api.permission.cellList.update,
        byId:   this.$api.permission.cellList.byId,
        delete: this.$api.permission.cellList.delete,
        exportFile: this.$api.permission.cellList.exportFile,
        outbound: this.$api.permission.cellList.outbound,
      }
    }
  },
  methods: {
    handleAdd() {
      this.$refs.modalForm.add()
    },

    handleOut(record) {
      console.log('record:', record);
      this.$refs.outModal.open(record);  // 打开出库弹框
    },

    async exportExcel () {
      this.exportLoading = true
      await this.exportXlsNotDate(this.url.exportFile, this.queryParam, '细胞列表导出文件', false)
      this.exportLoading = false
    },

    maskPhone(phone) {
      if (!phone) return '';
      return phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
    },

    // 弹窗保存成功回调（CellModel emit）
    modalFormOk() {
      this.loadData()  // RyListMixin 一般有这个方法
    },

  }
}
</script>

<style lang="less">
#LabelInfoMaintain {
  border-left: 1px solid #f4f4f4;
}
.table-operator {
  display: flex;
  justify-content: space-between;
  align-content: center;
  .setting {
    margin-top: 5px;
    font-size: 16px;
    color: #00bbbb;
  }
}
.age_box {
  width: 100%;
  padding: 0;
  .ant-form-item {
    width: 100%;
    text-align: center;
  }
  .ant-input {
    width: 40%;
  }
}
.ant-col .ant-col-1 {
  padding: -12px;
}
.table-page-search-wrapper {
  margin-left: 0rem;
}
.table_headr {
  color: #000000;
  .labelSty {
    margin-right: 30px;
    font-size: 18px;
  }
  .ant-btn {
    text-align: center;
    background: #f2f2f2;
    color: #868686;
    border: 0;
  }
  .dataColor {
    color: #3ec2c9;
    padding: 0 10px 0 10px;
  }
  .table-search-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    .ant-input {
      width: 100%;
    }
    .table-search-submitButtons {
      display: flex;
      justify-content: center;
      align-content: center;
      .ant-btn {
        background: #989eab;
        color: #fff;
        margin-right: 10px;
      }
      .ant-btn:first-child {
        background: #ffac54;
      }
    }
  }
}
</style>
